﻿@{
    ViewBag.Title = "FaceShape";
    Layout = "~/Views/Shared/face.cshtml";
}

@section Head{
    <style>
        html, body {
            height: 100%;
            overflow: hidden;
        }


        #fileUpload {
            width: 300px;
            height: 100px;
    
        }
        #img{
            display:block;
            z-index:0;
        } 
        #bg {
            position: relative;
        }
        .point{
            position:absolute;
            width:6px;height:6px;
            background-color:rgba(255,255,255,.8);
            border-radius:50%;
        }
        .newface{
            position:absolute;
            z-index:1;
        }
    </style>
}

<div id="scanbar" class="top"></div>
<div id="bg">
    <img id="img" src="#" />

    @*<img class="newface" style="top:2px;left:2px;width:20px;height:20px;" />*@

    <div class="point" style="top:2px;left:2px;"></div>
</div>
<input type="file" name="imgFile" id="fileUpload" onchange="ChangeUploadImg(event,this)" class="uploadCtrl" />
<div id="desc-box" class="am-text-sm am-text-center">
    <span class="am-text-danger">
        *点击图片重新上传识别*<br />
        为了准确检测，请上传个人大头贴
    </span><br />
</div>


@section Scripts{
    <script src="~/Scripts/ajaxfileupload.js"></script>
    <script>   
        function ChangeUploadImg(evt, obj) {
            var files = evt.target.files; // 获得文件对象
            //检查文件的类型是否符合指定要求
            if (files[0].type.indexOf("image") == -1) {
                amAlert("上传图片必须为jpg/jpeg/png/gif格式");
                $(obj).val('');
            }
            else {
                var src = getObjectURL(files[0]);
                $("#img").attr("src", src);
                UploadImg();
            }
        }

        function UploadImg() {            
            var id = 123123;
            $.ajaxFileUpload({
                url: "WxUpload?imgid=" + id,
                secureuri: false,
                fileElementId: "fileUpload",
                dataType: 'text',
                success: function (msg) {     
                    var result = msg.split('>')[1].split('<')[0];
                    var jsonStr = JSON.parse(result);
                    console.log(result, jsonStr);
                    if (jsonStr.state == "success") {
                        amAlert('SUCCESS!');
                        var faces = jsonStr.retFace;
                        if(faces.length>1)
                        {
                            var strHtml = "";
                            strHtml += "<img class=\"newface\" src=\"../images/face/temp/" + faces[0].src + "\" style=\"top:" + faces[1].y + "px;left:" + faces[1].x + "px;width:" + faces[1].width + "px;height:" + faces[1].height + "px;\" />";
                            strHtml += "<img class=\"newface\" src=\"../images/face/temp/" + faces[1].src + "\" style=\"top:" + faces[0].y + "px;left:" + faces[0].x + "px;width:" + faces[0].width + "px;height:" + faces[0].height + "px;\" />";
                            $("#bg").append(strHtml);
                        }
                       
                    }
                    else {
                        amAlert('图片识别失败，请换张只有一个人的大头贴！');
                    }
                },
                error: function (msg, e) {                    
                    amAlert('照片识别失败');
                }
            });
        }

        function getObjectURL(file) {
            var url = null;
            if (window.createObjectURL != undefined) {
                url = window.createObjectURL(file)
            } else if (window.URL != undefined) {
                url = window.URL.createObjectURL(file)
            } else if (window.webkitURL != undefined) {
                url = window.webkitURL.createObjectURL(file)
            }
            return url
        }

    </script>
}
